<template>
<view class="page-wrap">
  <u-sticky :h5-nav-height="0" bg-color="transparent">
    <view class="sticky-bg">
      <u-navbar title-bold
                :is-fixed="false"
                :titleSize="34"
                :is-back="false"
                :border-bottom="false"
                :background="{background:'transparent'}"
                title-color="#2F3033"
      >
        <template v-slot:left>
          <view class="back-wrap" @click="back()">
            <image src="/yixu/static/images/dynamic_code/back.png"></image>
            <text>二维码详情</text>
          </view>
        </template>
      </u-navbar>
    </view>
  </u-sticky>

  <view class="com-wrap">
    <view class="qrcode-wrap">
      <view class="name">
        {{ d.name }}
      </view>
      <view class="code">
        <tki-qrcode
            ref="qrcode"
            uni="px"
            :val="d.url"
            :size="130 * 2"
        />
      </view>

      <view class="date">
        有效期至：{{ d.end_time_txt }}
      </view>
      <view class="action-wrap">
        <view class="action-item" @click="onAction('download')">
          <image src="/yixu/static/images/dynamic_code/qrcode_detail/1.png"></image>
          <view>下载</view>
        </view>
        <view class="action-item" @click="onAction('status')">
          <image src="/yixu/static/images/dynamic_code/qrcode_detail/2.png"></image>
          <view>{{ d.is_disable == 0 ? '禁用' : '启用' }}</view>
        </view>
        <view class="action-item" @click="onAction('edit')">
          <image src="/yixu/static/images/dynamic_code/qrcode_detail/3.png"></image>
          <view>编辑</view>
        </view>
        <view class="action-item" @click="onAction('del')">
          <image src="/yixu/static/images/dynamic_code/qrcode_detail/4.png"></image>
          <view>删除</view>
        </view>
      </view>
    </view>
    <view class="data-wrap">
      <view class="title">数据</view>
      <view class="data-inner">
        <view class="item-item">
          <view>{{ d['j_day'] }}</view>
          <view>今日</view>
        </view>
        <view class="item-item">
          <view>{{ d['z_day'] }}</view>
          <view>昨日</view>
        </view>
        <view class="item-item">
          <view>{{ d['7_day'] }}</view>
          <view>近七日</view>
        </view>
        <view class="item-item">
          <view>{{ d['a_day'] }}</view>
          <view>总扫描量</view>
        </view>
      </view>
    </view>
  </view>

</view>
</template>

<script>
import {apiChangeCodeStatus, apiCodeDelete, apiDeleteProduct, apiGetCodeDetail} from "../../api/dynamic_code.js";
import TkiQrcode from "@/components/tki-qrcode/tki-qrcode.vue";


export default {
  components: {TkiQrcode},

  data() {
    return {
      d: {}
    };
  },
  onLoad({id}) {
    this.init(id);
  },
  methods: {
    async init(id) {
      const res = await apiGetCodeDetail({id});
      this.d = res.data;
      this.$nextTick(() => {
        this.$refs.qrcode._makeCode()
      })
    },
  back(){
    uni.navigateBack();
  },
    async onAction(action) {
      let d = this.d;
      switch (action) {
        case 'download':
          this.$refs.qrcode._saveCode()

          break;
        case 'edit':
          uni.navigateTo({
            url:'/yixu/pages/dynamic_code/qrcode_create?id=' + d.id
          })
          break;
        case 'status':
          let params = {id: d.id, is_disable: d.is_disable == 0 ? 1 : 0};
          await apiChangeCodeStatus(params)
          d.is_disable = params.is_disable;
          break;
        case 'del':
          uni.showModal({
            title: '提示',
            content: '确认删除该二维码吗？',
            confirmColor: '#94BFFF',
            confirmText: '确认删除',
            async success(res) {
              if (res.confirm) {
                try {
                  uni.showLoading();
                  const res = await apiCodeDelete({id:d.id});
                  if (res.code == 1) {
                    uni.$u.toast('删除成功');
                    uni.$emit('REFRESH_QRCODE_LIST');
                    setTimeout(()=>{
                      uni.hideLoading();
                      uni.navigateBack();
                    },1500)
                  } else {
                    uni.hideLoading();
                    uni.$u.toast(res.msg);
                  }
                } finally {
                }
              }
            }
          })

          break;
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.page-wrap {
  background-image: url("https://theme.lanbaozixun.com/lbzx/dynamic_code/bg.png");
  background-repeat: no-repeat;
  background-size: contain;
  background-position-y: -50rpx;
  height: 100vh;
  background-color: #F5F5F5;

  //background-color: white;
}

.sticky-bg {
  background: url("https://theme.lanbaozixun.com/lbzx/dynamic_code/bg.png");
  background-size: 100%;
}

.back-wrap {
  display: flex;
  align-items: center;
  padding-left: 30rpx;
  gap: 10rpx;

  image {
    width: 30rpx;
    height: 30rpx;
  }

  text {
    font-weight: bold;
  }
}


.com-wrap {
  //padding: 40rpx 30rpx;
  padding: 30rpx;
}

.data-wrap {
  background: white;
  padding: 30rpx;
  border-radius: 20rpx;
  margin-top: 30rpx;

  .title {
    font-size: 30rpx;
    font-weight: 400;
  }

  .data-inner {
    margin-top: 30rpx;
    text-align: center;
    display: flex;
    justify-content: space-around;

    .item-item {
      color: #666666;
      font-size: 24rpx;

      view:first-child {
        color: rgba(52, 131, 251, 1);
        font-size: 36rpx;
        font-weight: 700;
        margin-bottom: 12rpx;
      }
    }
  }
}

.qrcode-wrap {
  text-align: center;
  border-radius: 30rpx;
  background: linear-gradient(90deg, #EBF3FE 0%, #FCEBEC 100%);
  padding-top: 30rpx;
  border: 2px solid #FFFFFF;

  .name {
    color: #11141F;
    font-size: 36rpx;
    font-weight: 500;
  }

  .code {
    height: 360rpx;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .date {
    color: #3A3F4F;
    margin-bottom: 30rpx;
  }

  .action-wrap {
    padding: 30rpx;
    border-top: 2rpx solid #DEDEDE;
    display: flex;
    justify-content: space-around;
    color: #666666;
    font-size: 24rpx;

    image {
      width: 40rpx;
      height: 40rpx;
    }

    .action-item:last-child image {
      width: 38rpx;
      height: 40rpx;
    }
  }
}
</style>
